<template>
  <div id="app">
    <div id="head" v-show="is_showPublicNav">
      <div class="center iconfont">&#xe61d;</div>
      <div class="left">
        <span @click="menu" style="margin-left:25px;font-size:0.8rem;margin-right:25px;cursor:pointer;" class="iconfont">&#xe61f;</span>
        <span><span class="web-font">weteach</span>后台管理</span>
      </div>
      <div class="right">
        <el-tooltip class="item" effect="dark" :content="screenText" placement="bottom">
        <span @click="setScreen" style="cursor:pointer;font-size:0.8rem;" class="iconfont icon-fscreen">&#xe62a;</span>
        </el-tooltip>
        <div class="avatar"><el-avatar :size="50" src="https://avatar-static.segmentfault.com/406/594/406594657-6073b0ac7c433_huge256"></el-avatar></div>
        <div class="dropMenu">
          <el-dropdown>
      <span style="cursor:pointer;margin-left:10px;"  class="el-dropdown-link">
        <span style="color:#fff;">admin</span><i style="color:#fff;" class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu @click.native="logout" slot="dropdown">
        <el-dropdown-item icon="el-icon-plus">登出</el-dropdown-item>
      </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div>
          <img src="" alt="">
        </div>
      </div>
    </div>
    <div v-if="isRouterAlive" id="nav" v-show="is_showPublicNav">
      <div @click="navClick(1)"><span :class="navIndex==1 ? 'navActive' : ''" class="iconfont icon-home">&#xe617;</span><span v-show="isnavitemShow" style="width: 15vw;" ref="home" ><p :class="[navIndex==1 ? 'navActive' : '']" >系统首页</p></span></div>
      <div @click="navClick(2)"><span  :class="navIndex==2 ? 'navActive' : ''" class="iconfont icon-usermanage">&#xe718;</span><span v-show="isnavitemShow" style="width: 15vw;" ref="usermanage"><p :class="[navIndex==2 ? 'navActive' : '']" >用户管理</p></span></div>
      <div @click="navClick(3)"><span  :class="navIndex==3 ? 'navActive' : ''" class="iconfont icon-resourceRelease">&#xe79f;</span><span v-show="isnavitemShow" style="width: 15vw;" ref="release"><p :class="[navIndex==3 ? 'navActive' : '']">资源发布</p></span></div>
      <div @click="navClick(4)"><span style="font-size:0.9rem;line-height:0.9rem;" :class="navIndex==4 ? 'navActive' : ''" class="iconfont icon-resourceManage">&#xe62c;</span><span v-show="isnavitemShow" style="width: 15vw;" ref="r_manage"><p :class="[navIndex==4 ? 'navActive' : '']" >资源管理</p></span></div>
      <div @click="navClick(5)"><span :class="navIndex==5 ? 'navActive' : ''" class="iconfont icon-process">&#xe7ab;</span><span v-show="isnavitemShow" style="width: 15vw;" ref="process"><p :class="[navIndex==5 ? 'navActive' : '']" >信息处理</p></span></div>
      <div v-show="isnavitemShow" class="beian">
        <p>
          <a href="#">©humianyuan </a>
          <span style="color:#7e818c;width:1vw;text-align:center;">|</span><a href="https://beian.miit.gov.cn"> 备案号：[ 粤ICP备20008513号-1 ] </a>
        </p>
      </div>
    </div>
    <keep-alive>
    <router-view v-if="isRouterAlive" />
    </keep-alive>
    <div v-if="!isRouterAlive" class="myLoading">
      <div>
        <semipolar-spinner :animation-duration="2000" :size="100" color="#409EFF" />
        <div style="text-align:center;color:#303030;">加载中...</div>
      </div>
    </div>
  </div>
</template>
<script>
import {SemipolarSpinner} from 'epic-spinners'
import { delCookie } from "util/myCookie";
  import {
    mapState,
    mapMutations
  } from "vuex"
  export default {
    name: 'App',
    //给全局注册一个reload，需要使用时就注入该方法
    provide() {
      return {
        reload: this.reload
      }
    },
    data() {
      return {
        isRouterAlive: true,
        navIndex:1,
        scale:true,
        isnavitemShow:true,
        screenText:'全屏'
      }
    },
    watch: {
      nav_Index(newValue, oldValue) {
        this.navIndex = newValue;
        console.log("navindex=",newValue)
      }
    },
    computed: {
      ...mapState({
          is_showPublicNav: state => state.is_showPublicNav,
          nav_Index: state => state.nav_Index
        }),
      //  nav_Index:{
      //    get(){
      //      return this.$store.state.nav_Index;
      //    },
      //    get(v){
      //      this.nav_Index = v
      //    }
      //  } 
    },
    methods: {
      ...mapMutations(['changePublicNav','changeLateralNavanimate']),
      reload() {
        this.isRouterAlive = false;
        setTimeout(() => {
          this.isRouterAlive = true;
        }, 1000);
        // // console.log("fk:",this.isRouterAlive)
        // this.$nextTick(function () {
          
        //   //  console.log("fk:",this.isRouterAlive)
        // })
      },
      // 导航点击
      navClick(index){
        this.navIndex = index;
        console.log("当前点击的下标：",this.navIndex)
        if(index==1){
          this.$router.push('/home')
        }else if(index==2){
          this.$router.push('/user_manage')
        }else if(index==3){
          this.$router.push('/resource_release')
        }else if(index==4){
          this.$router.push('/resource_manage')
        }else if(index==5){
          this.$router.push('/process')
        }
      },
      menu(){
        let that = this;
        this.scale=!this.scale;
        if(this.scale==false){
          let width = 15;
          let negWidth = 0
          let speed = 1;
          let timer = null;
          console.log("this.$refs.home.style.width；",this.$refs.home.style.width)
          timer = setInterval(() => {
            width = width - speed;
            negWidth = negWidth +speed
            if(speed>=6){clearInterval(timer)}
            else{
              this.changeLateralNavanimate({"positive":width,"negative":negWidth});//记录侧边栏的宽度
              this.$refs.home.style.width = width+'vw';
              this.$refs.usermanage.style.width = width+'vw';
              this.$refs.release.style.width = width+'vw';
              this.$refs.r_manage.style.width = width+'vw'
              this.$refs.process.style.width = width+'vw';
              speed = speed+1
              if(speed==4){
                that.isnavitemShow = false
              }
            }
          }, 100);
          
        }else{
          let width = 0;
          let negWidth = 15;
          let speed = 1;
          let timer = null;
          console.log("this.$refs.home.style.width；",this.$refs.home.style.width)
          timer = setInterval(() => {
            width = width + speed;
            negWidth = negWidth - speed;
            if(speed>=6){clearInterval(timer)}
            else{
              this.changeLateralNavanimate({"positive":width,"negative":negWidth});//记录侧边栏的宽度
              this.$refs.home.style.width = width+'vw';
              this.$refs.usermanage.style.width = width+'vw';
              this.$refs.release.style.width = width+'vw';
              this.$refs.r_manage.style.width = width+'vw'
              this.$refs.process.style.width = width+'vw';
              speed = speed+1
               if(speed==4){
                that.isnavitemShow = true
              }
            }
          }, 100);
        }
      },
      // 全屏
      fullScreen(){
    var el = document.documentElement;
    var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen;
    //typeof rfs != "undefined" && rfs
    if (rfs) {
        rfs.call(el);
    }
    else if (typeof window.ActiveXObject !== "undefined") {
        //for IE，这里其实就是模拟了按下键盘的F11，使浏览器全屏
        var wscript = new ActiveXObject("WScript.Shell");
        if (wscript != null) {
            wscript.SendKeys("{F11}");
        }
    }
},
//退出全屏
exitScreen(){
    var el = document;
    var cfs = el.cancelFullScreen || el.webkitCancelFullScreen || el.mozCancelFullScreen || el.exitFullScreen;
    //typeof cfs != "undefined" && cfs
    if (cfs) {
        cfs.call(el);
    }
    else if (typeof window.ActiveXObject !== "undefined") {
        //for IE，这里和fullScreen相同，模拟按下F11键退出全屏
        var wscript = new ActiveXObject("WScript.Shell");
        if (wscript != null) {
            wscript.SendKeys("{F11}");
        }
    }
},
// 是否全屏
setScreen(){
  if(this.screenText=='取消全屏'){
    this.screenText = '全屏'
    this.exitScreen();
  }else{
    this.screenText='取消全屏'
    this.fullScreen()
  }
},
// 登出
logout(){
  delCookie('user');
  delCookie('time')
  delCookie('address')
  console.log("退出系统")
  location.reload();
}
    },
    mounted() {
      console.log("刷新")
      this.reload() 
    },
    components: {
      SemipolarSpinner
    }
  }
</script>
<style lang="less">
body{
  background-color: #f0f0f0;
}
#head{
  user-select: none;
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  height: 10vh;
  width: 100vw;
  background-color: #242f42;
  color: #fff;
  line-height: 10vh;
  .center{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    animation: xuanzhuan 6s linear infinite;
    -webkit-animation: xuanzhuan 6s linear infinite ;
    transform-origin:center center;
    -webkit-transform-origin: center center ;
  }
  .right{
    margin-right: 15px;
    display: flex;
    .avatar{
      margin-left: 25px;
      padding-top: 8px ;
    }
  }
}
#nav{
  box-sizing: border-box;
  position: absolute;
  height: 90vh;
  bottom: 0%;
  z-index: 10;
  background-color: #324157;
  div{
    cursor: pointer;
    box-sizing: border-box;
    padding-left: 20px;
    font-size: 0.6rem;
    padding-top: 15px;
    padding-bottom: 15px;
    color: #7e818c;
    span:nth-child(1){
      display: inline-block;
      font-size: 0.6rem;
      text-align: center;
      width: 5vw;
    }
    span:nth-child(2){
      display: inline-block;
    }
  }
  div:hover{
    background-color:#283446 ;
  }
  .beian{
    position: absolute;
    bottom: 10px;
    p{
      font-size: 0.4rem;
      a:hover{
        color: #20a0ff;
      }
    }
  }
}
.navActive{
  color:#20a0ff;
}
.myLoading{
  background-color: #f5f5f5;
  width: 100vw;
  height: 100vh;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}
@keyframes xuanzhuan{
   0% {
    transform: rotate(0deg);
    transform-origin:center center;
    -webkit-transform-origin: center center ;
  }

  5% {
    transform: rotate(90deg);
    transform-origin:center center;
    -webkit-transform-origin: center center ;
  }

  10% {
    transform: rotate(180deg);
    transform-origin:center center;
    -webkit-transform-origin: center center ;
  }

  15% {
    transform: rotate(270deg);
    transform-origin:center center;
    -webkit-transform-origin: center center ;
  }

  20% {
    transform: rotate(360deg);
    transform-origin:center center;
    -webkit-transform-origin: center center ;
  }
  100%{

  }
}
@-webkit-keyframes xuanzhuan {
  0% {
    -webkit-transform: rotate(0deg);
    transform-origin:center center;
    -webkit-transform-origin: center center ;
  }

  5% {
    -webkit-transform: rotate(90deg);
    transform-origin:center center;
    -webkit-transform-origin: center center ;
  }

  10% {
    -webkit-transform: rotate(180deg);
    transform-origin:center center;
    -webkit-transform-origin: center center ;
  }

  15% {
    -webkit-transform: rotate(270deg);
    transform-origin:center center;
    -webkit-transform-origin: center center ;
  }

  20% {
    -webkit-transform: rotate(360deg);
    transform-origin:center center;
    -webkit-transform-origin: center center ;
  }
  100%{
    
  }
}
</style>
